<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<style>
* {
    padding: 0;
    margin: 0;
    background-color: #fff;
}

ul {
    list-style: none;
    width: 80%;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
    height: 250px;
}

li {
    width: 22%;
    float: left;
    margin: 10px;
    font-size: 40px;
    line-height: 200px;
    text-align: center;
    background-color: #eaeaea;
    color: #1296db;
    position: absolute;
    transition: all .8s;
    border: 1px solid #808080;
}

li:before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 10px;
    left: 10px;
    background-color: red;
    transform: rotateZ(3deg) skew(8deg);
    box-shadow: 0 0 30px 30px red;
    z-index: -1
}

li:after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    right: 10px;
    left: 10px;
    background-color: red;
    transform: rotateZ(-3deg) skew(-8deg);
    box-shadow: 0 0 30px 30px red;
    z-index: -1
}
</style>
<script>
    // setTimeout(function(){alert(111)},3000);
</script>
<body>
    <!-- 案例-认识dom-节点类型-domReady-类型判断-继承层次-嵌套规则 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <!--
        DOM 文档对象那个模型
        ECMAScript BOM DOM 
        DOMReady 节点探究 -->
    <!-- 
        1级：dom core html 衍射文档结构 
        2级：views events style traversal and range 
        3级：load and save validation 
        浏览器不断更新支持dom功能 -->
    <!-- 
        数值常量_ _字符常量
        element节点类型 html div span ...等等
        attr 属性节点 附属在元素节点
        text 文本节点 空白或者字符
        comment 注释节点 注释内容
        document 文档节点 根节点 所欲节点的父节点
        documentType 文档类型节点 
        documentFragment 文档片段节点 最小片段 很强的应用 ...?
         -->
    <!-- 获取节点的类型 -->
    <!-- 
        判断元素节点的类型,不同类型设置方法不一样 el.xxx=yyy el.setAttribute(xxx,yyy) 
        isElement ！！el&&el.nodeType===1 节点存在而且nodeType 不能防止伪造对象==>instanceof Node加判断是否能appendChild,removeChild方法 try(archild) catch finally         
        isHTML isXML  html是xml子级 svg- 创建标签是否区分大小写 ce('p').nodeName?=ce('P').
        contains两个节点的包含关系 contains()-方法（两个元素节点=都兼容）ie => document不支持 文本节点//ie现在还不支持
            Mycontain{
                try{
                    while(b=b.parentNode){
                        if(b===a)
                    }
                }catch(e){
                    return false
                }
            }
    -->
    <!-- 
        dom节点继承层次 
        创建creat(p) ->htmlparagraphelement->htmlel->el->node->eventtarget->function->object
        创建文本节点    ctnode==>text==>characterdata==>node==>eventTarget==>function==>object
        getOwnPropertyNames 每一层就会添加很多原型属性等等
     -->
    <!-- 
        html嵌套规则
        块元素 address.blockquote.center.dir.div.dl.dt.dd.fieldset.form.h1-h6.hr.isindex.menu.noframes.noscript.ol.p.pre.table.ul
        内联元素 a.abbr.acronym.b.bdo.big.br.cite.cde.dfn.em.font.i.img.input.kbd.label.q.s.samp.select.small.span.strike.strong.sub.sup.textarea.tt.u.var
        块元素可以包含内联元素或者某些块元素,但内联元素不能包含块元素,能包含其他内联元素
        块级元素不能放在<p>
        几个特俗块级元素只能包含内联元素 h1-h6...p...dt
        li可以包含div 地位平等
        块级和块级并列 内联和内联并列 其他不推荐
        ol和li dl和dt ul和li select option只能放文本 热点链接 map area[shape{rect.circle.poly}.coords{坐标和形状}.href{链接}]
        多媒体对象 object对象 embed param
        表格系列 table colgroup col thead tbody tfoot tr th td  
    -->

     <div id="test">testde<!-- mo --> <span>11</span></div>
     <select name="" id="">
         <option value="">11</option>
         <optgroup label="aaa">
         <option value="">22</option>
         <option value="">32</option>
         <option value="">12</option>
         </optgroup>
         <optgroup label="bbb">
         <option value="">13</option>
         <option value="">31</option>
         <option value="">31</option>
         </optgroup>
     </select>
</body>

<script>
// DOMReady 渲染dom树完成的时机
// 请求的html文件 解析html 构建dom树 构建渲染树 布局渲染树 绘制dom节点 
// html=>dom tree css=>style rules  attachment 连接=>renderTree=>painting...
// 从上到下，从左到右
// window.onload 所有资源...外部资源不多的时候可以...dom树构建比较快,,,而资源没有请求完不会触发
// a链接性能优化???
// $(document).ready(function)===>
// DomContentLoaded html解析完成 
// 支持domcontentLoaded->使用这个事件 
// 低版本ie不支持element.doScroll('left')判断dom树是否创建完毕 if(!flag){flag=true;fn()} 执行一次
// document.readyState=='complete'--立即执行函数函数放在前面try-catch(中定时器arguement.callee)-finally-执行init方法...
// document.addEvenListenner 判断浏览器类型 支持就上面事件判断...

// 页面所有资源请求完毕才执行
window.onload = function() {

    var div=document.getElementById('test');
    console.log(div.nodeType+div.nodeName);
    console.log(div.attributes);
    // 所有的子节点 数组
    console.log(div.childNodes);
    console.log(''+div.childNodes[0].nodeName+div.childNodes[0].nodeValue);
    console.log(document.doctype.nodeName);

    // 文档片段
    var frag=document.createDocumentFragment();
    console.log(frag.nodeName+''+frag.nodeValue);


    var con = document.getElementsByTagName('li');

    // 相关位置信息 宽高属性
    var width = con[0].offsetWidth;

    var exp = 140;
    //设置初始位置
    function setpos() {

        for (var i = 1; i < con.length; i++) {
            con[i].style.left = width + exp * (i - 1) + 'px';
        }
    }

    setpos();

    var trans = width - exp;

    for (var i = 0; i < con.length; i++) {
        (function(i) {
            con[i].onmouseover = function() {
                setpos();
                for (var j = 1; j <= i; j++) {
                    con[j].style.left = parseInt(con[j].style.left) - trans + 'px';
                }

            }
        })(i)

    }
}
</script>

</html>